<template>
  <div class="inside-list">
    <div class="search-box">
      <Row type="flex"
           justify="start">
        <Col class="search-item">
        <span class="search-label">对账结果:</span>
        <Select v-model="checkStatus"
                @on-change="search">
          <Option v-for="item in statusList"
                  :value="item.value"
                  :key="item.value">{{ item.label }}</Option>
        </Select>
        </Col>
        <Col class="search-item">
        <span class="search-label">对账备注:</span>
        <Select v-model="checkResult"
                @on-change="search">
          <Option v-for="item in resultList"
                  :value="item.value"
                  :key="item.value">{{ item.label }}</Option>
        </Select>
        </Col>
        <Col class="search-item">
        <span class="search-label">对账日期:</span>
        <DatePicker type="date"
                    :editable="false"
                    format="yyyy-MM-dd"
                    :value="dateVal"
                    @on-change="selectStartTime"
                    placement="bottom">
        </DatePicker>
        </Col>
        <Col class="search-item">
        <Button class="search-btn"
                type="primary"
                @click="search">查询</Button>
        </Col>
        <Col class="search-item">
        <Button class="search-btn"
                @click="reset">重置</Button>
        </Col>
      </Row>
    </div>
    <Table class="table-list"
           :height="tableHeight"
           :loading="loading"
           :columns="columns"
           :data="data"
           stripe>
      <template slot-scope="{ row, index }"
                slot="payType">
        <span>{{ getName(payAllType, row.payType) }}</span>
      </template>
      <template slot-scope="{ row, index }"
                slot="orderType">
        <span>{{ getName(orderAllType, row.orderType) }}</span>
      </template>
      <template slot-scope="{ row, index }"
                slot="checkResult">
        <span>{{ getName(statusList, row.checkResult) }}</span>
      </template>
      <template slot-scope="{ row, index }"
                slot="errorType">
        <span>{{ getName(resultList, row.errorType) }}</span>
      </template>
      <template slot-scope="{ row, index }"
                slot="remark">
        <i class="iconsys icondetail"
           title="查看备注详情"
           @click="lookNotesDetail(row)"></i>
      </template>
      <template slot-scope="{ row, index }"
                slot="action">
        <i class="iconsys iconchacuochuli"
           title="差错处理"
           v-if="row.checkResult === 1 && hasPermission('moms:pay:fixinternalcheck')"
           @click="handleError(row)"></i>
      </template>
    </Table>
    <Modal v-model="errorHandle"
           title="差错处理"
           :mask-closable="false"
           :closable="false">
      <Form :model="formValidate"
            :label-width="65">
        <FormItem label="处理备注:">
          <Input v-model="formValidate.remark"
                 type="textarea"
                 :autosize="{ minRows: 4, maxRows: 8 }"
                 :maxlength="300"
                 placeholder="请输入相关描述"
                 class="Row_content_input"></Input>
          <span class="rol_tipsd">
            {{ formValidate.remark.length }}/300
          </span>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text"
                @click="insideCancel">取消</Button>
        <Button type="primary"
                @click="ok"
                :disabled="loadingModel"
                :loading="loadingModel">确认</Button>
      </div>
    </Modal>
    <Row type="flex">
      <Col span="12"
           style="padding-left:24px;margin:20px 0;">
      </Col>
      <Col span="12">
      <div class="page-box">
        <Page :total="total"
              :page-size="pageSize"
              :current="pageIndex"
              show-total
              show-sizer
              @on-change="changePageIndex"
              @on-page-size-change="changePageSize" />
      </div>
      </Col>
    </Row>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { getLists, handleError } from '@/api/pay/inside.js'
import { formatDate } from '@/libs/tools'
import insideMixin from './inside'
export default {
  name: 'payment_check_inside_list',
  mixins: [insideMixin],
  data () {
    return {
      tableHeight: 0,
      total: 0,
      pageIndex: 1,
      pageSize: 10,
      loading: true,
      dateVal: formatDate(new Date(), 'yyyy-MM-dd'),
      checkStatus: 1,
      statusList: [
        {
          value: -1, label: '全部'
        },
        {
          value: 0, label: '正常'
        },
        {
          value: 1, label: '异常待处理'
        },
        {
          value: 2, label: '异常已处理'
        }
      ],
      checkResult: -2,
      resultList: [
        {
          value: -2, label: '全部'
        },
        {
          value: -1, label: '正常'
        },
        {
          value: 0, label: '短款'
        },
        {
          value: 1, label: '长款'
        },
        {
          value: 2, label: '金额不一致'
        },
        {
          value: 3, label: '状态不一致'
        }
      ],
      columns: [
        {
          title: '内部对账编号',
          key: 'bizCheckId',
          minWidth: 180,
          fixed: 'left'
        },
        {
          title: '对账日期',
          key: 'statDate',
          minWidth: 120
        },
        {
          title: '支付流水号/退款流水号/冲正流水号',
          key: 'paymentSerialNo',
          minWidth: 240
        },
        {
          title: '支付完成时间/退款完成时间/冲正完成时间',
          key: 'finishedAt',
          minWidth: 300
        },
        {
          title: '支付类型',
          slot: 'payType',
          minWidth: 120
        },
        {
          title: '支付金额/退款金额/冲正金额',
          key: 'totalAmount',
          minWidth: 240
        },
        {
          title: '订单ID',
          key: 'orderCode',
          minWidth: 200
        },
        {
          title: '下单时间',
          key: 'orderAt',
          minWidth: 160
        },
        {
          title: '订单类型',
          slot: 'orderType',
          minWidth: 120
        },
        {
          title: '应付金额/退款金额/冲正金额',
          key: 'payableFee',
          minWidth: 240
        },
        {
          title: '对账结果',
          slot: 'checkResult',
          minWidth: 160
        },
        {
          title: '对账备注',
          slot: 'errorType',
          minWidth: 160
        },
        {
          title: '处理备注',
          slot: 'remark',
          fixed: 'right',
          align: 'center',
          minWidth: 100
        }
      ],
      data: [],
      errorHandle: false,
      loadingModel: false,
      selectRow: {},
      formValidate: {
        remark: ''
      }
    }
  },
  mounted () {
    this.getData()
    if (this.hasPermission(['moms:pay:fixinternalcheck'])) {
      this.columns.push({
        title: '操作',
        slot: 'action',
        fixed: 'right',
        minWidth: 60
      })
    }
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId,
      orgId: state => state.user.orgId
    })
  },
  watch: {
    '$route' (newRoute) {
      if (newRoute.name === 'payment_check_inside_list') {
        this.search()
      }
    }
  },
  methods: {
    selectStartTime (val) {
      this.dateVal = val
    },
    search () {
      this.pageIndex = 1
      this.getData()
    },
    reset () {
      this.checkStatus = 1
      this.checkResult = -2
      this.dateVal = formatDate(new Date(), 'yyyy-MM-dd')
      this.search()
    },
    changePageIndex (page) {
      this.pageIndex = page
      this.getData()
    },
    changePageSize (size) {
      this.pageSize = size
      this.search()
    },
    lookNotesDetail (row) {
      this.$router.push({
        name: 'payment_check_inside_notes',
        params: {
          id: row.orderCode
        }
      })
    },
    getData () {
      const params = {
        shopIds: [this.orgId],
        checkResult: this.checkStatus === -1 ? '' : this.checkStatus,
        errorType: this.checkResult === -2 ? '' : this.checkResult,
        merchantId: this.merchantId,
        statDate: this.dateVal ? this.dateToString(this.dateVal) : this.dateVal,
        offset: (this.pageIndex - 1) * this.pageSize,
        limit: this.pageSize
      }
      this.loading = true
      this.tableHeight = 0
      getLists(params).then(res => {
        this.loading = false
        const result = res.data || {}
        if (result.status === 200) {
          this.data = result.data || []
          if (this.data.length > 10) {
            this.tableHeight = 520
          }
          this.total = result.totalCount || 0
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
        this.loading = false
      })
    },
    dateToString (date) {
      if (typeof date === 'string') {
        return date
      } else {
        return formatDate(date, 'yyyy-MM-dd')
      }
    },
    getName (enums, value) {
      const result = enums.filter(item => item.value === value)
      return result.length ? result[0].label : ''
    },
    daterangeChange (daterange) {
      this.dateVal = daterange
    },
    handleError (row) {
      this.formValidate.remark = ''
      this.selectRow = row
      this.errorHandle = true
    },
    insideCancel () {
      this.errorHandle = false
    },
    ok () {
      this.loadingModel = true
      if (this.formValidate.remark) {
        handleError({
          ids: [this.selectRow.id],
          processRemark: this.formValidate.remark,
          merchantId: this.$store.state.user.merchantId
        }).then(res => {
          const result = res.data || {}
          if (result.status === 200) {
            this.loadingModel = false
            this.errorHandle = false
            this.$Message.success('处理成功！')
            this.getData()
          } else {
            this.loadingModel = false
            this.$Message.error(`${result.error}`)
          }
        }).catch(err => {
          this.loadingModel = false
          this.$Message.error(`${err}`)
        })
      } else {
        this.$Message.error({
          content: `请输入相关描述`,
          duration: 1
        })
        setTimeout(() => {
          this.loadingModel = false
        }, 1000)
      }
    }
  }
}
</script>
<style lang="less">
.inside-list {
  .ivu-table-tip {
    span {
      position: absolute;
      width: 100px;
      left: 50%;
      margin-left: -50px;
    }
  }
}
.ivu-form-item {
  margin-bottom: 0;
}
</style>
